<template>
    <div class="department">
        <p style="color: #606266; font-size: 14px;">
            <i class="el-icon-s-home"></i>
            <span>&nbsp;系管理</span>
        </p>

        <el-card class="box-card" :body-style="{ padding: '10px 25px' }">
            <div class="header">
                <div>
                    <el-button class="el-icon-plus" size="medium" @click="showAdd">
                        创建
                    </el-button>
                </div>
                <div style="width: 400px; display: flex;">
                    <el-input placeholder="系名" size="medium" v-model="name"></el-input>
                    <el-button class="el-icon-search" type="primary" style="margin-left: 20px;" @click="search"
                        size="medium">搜索</el-button>
                </div>
            </div>

            <div style="text-align: center;">
                <el-pagination background @current-change="handleCurrentChange" :current-page.sync="page"
                    :page-size="10" layout=" prev, pager, next" :total="total">
                </el-pagination>
            </div>

            <el-table :data="tableData" stripe style="width: 100%" v-loading="loading">
                <el-table-column prop="id" label="系id">
                </el-table-column>
                <el-table-column prop="name" label="系名">
                </el-table-column>
                <el-table-column prop="majorCount" label="专业数">
                </el-table-column>
                <el-table-column prop="teacherCount" label="教师数">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="success" size="mini" @click="showEdit(scope.row.id)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="delDepartment(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <el-dialog title="编辑" :visible.sync="dialogFormVisible">
            <DepartmentAdd @cancelAdd="handleCancel" @close="handleClose" :key="dialogFormVisible"></DepartmentAdd>
        </el-dialog>
        <el-dialog title="编辑" :visible.sync="editVisible">
            <DepartmentEdit @cancelAdd="handleCancel" @close="handleClose" :key="editVisible" :editId="this.editId">
            </DepartmentEdit>
        </el-dialog>
    </div>
</template>

<script>
import { departmentGetPage, departmentGetPageCount, departmentDelete } from '@/api/admin/department';
import DepartmentAdd from '@/components/admin/DepartmentAdd.vue';
import DepartmentEdit from '@/components/admin/DepartmentEdit.vue';
export default {
    components: { DepartmentAdd, DepartmentEdit },
    data() {
        return {
            tableData: [],
            page: 1,
            name: "",
            total: 0,
            dialogFormVisible: false,
            editVisible: false,
            editId: "",
            loading: false
        }
    },
    methods: {
        handleCancel() {
            this.dialogFormVisible = false
            this.editVisible = false
        },
        handleClose() {
            this.dialogFormVisible = false
            this.editVisible = false
            this.getList()
        },
        showAdd() {
            this.dialogFormVisible = true
        },
        handleCurrentChange(val) {
            this.page = val
            this.getList()
        },
        getPageCount() {
            departmentGetPageCount().then(res => {
                // console.log(res)
                if (res.code === 0) {
                    this.total = res.data * 10
                }
            })
        },
        getList() {
            this.loading = true
            let params = {
                name: this.name
            }
            departmentGetPage(params, this.page).then(res => {
                // console.log(res)
                this.tableData = res.data
            }).finally(() => {
                this.loading = false
            })
        },
        search() {
            this.page = 1
            this.getList()
        },
        delDepartment(id) {
            if (id) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    departmentDelete(id).then(res => {
                        // console.log(res)
                        if (res.code === 0) {
                            this.$message({
                                type: "success",
                                message: res.data
                            })
                            this.getList()
                        } else {
                            this.$message({
                                type: "error",
                                message: "网络错误"
                            })
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });


            } else {
                this.$message({
                    type: "error",
                    message: "不存在这个系"
                })
            }

        },
        showEdit(id) {
            this.editId = id
            this.editVisible = true
        }
    },
    mounted() {
        this.getList()
        this.getPageCount()
    }
}
</script>

<style lang="scss" scoped>
.department {
    height: 100%;



    .box-card {
        width: 100%;
        margin-top: 5px;
        font-size: 14px;



        .header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;

        }
    }
}
</style>